<template>
  <div class="Page-search">
    <el-tabs v-model="activeName" v-if="restart">
      <el-tab-pane lazy label="单曲" name="songs">
        <E-page-songs :keywords="keywords" />
      </el-tab-pane>
      <el-tab-pane lazy label="歌手" name="singer">
        <E-page-singer :keywords="keywords" />
      </el-tab-pane>
      <el-tab-pane lazy label="专辑" name="album">
        <E-page-album :keywords="keywords" />
      </el-tab-pane>
      <el-tab-pane lazy label="歌单" name="playlist">
        <E-page-playlist :keywords="keywords" />
      </el-tab-pane>
      <el-tab-pane lazy label="歌词" name="lyric">
        <E-page-lyric :keywords="keywords" />
      </el-tab-pane>
      <el-tab-pane disabled lazy label="视频" name="video">
        <E-page-video :keywords="keywords" />
      </el-tab-pane>
      <el-tab-pane disabled lazy label="主播电台" name="host-station">
        <E-page-host-station :keywords="keywords" />
      </el-tab-pane>
      <el-tab-pane disabled lazy label="用户" name="users">
        <E-page-users :keywords="keywords" />
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
export default {
  name: 'Page-search',
  props: ['keys'],
  beforeRouteUpdate(to, from, next) {
    this.keywords = to.params.keys;
    /* this.restart -- 使用一个笨方法，重新刷新组件 */
    this.restart = false;
    // eslint-disable-next-line no-return-assign
    setTimeout(() => this.restart = true, 0);
    next();
  },
  components: {
    'E-page-songs': () => import('@/components/Page-search/E-page-songs'),
    'E-page-singer': () => import('@/components/Page-search/E-page-singer'),
    'E-page-album': () => import('@/components/Page-search/E-page-album'),
    'E-page-video': () => import('@/components/Page-search/E-page-video'),
    'E-page-playlist': () => import('@/components/Page-search/E-page-playlist'),
    'E-page-lyric': () => import('@/components/Page-search/E-page-lyric'),
    'E-page-host-station': () => import('@/components/Page-search/E-page-host-station'),
    'E-page-users': () => import('@/components/Page-search/E-page-users')
  },
  data() {
    return {
      restart: true,
      activeName: 'songs',
      keywords: this.keys
    };
  }
};
</script>

<style lang="scss">
.Page-search {
  & > .el-tabs {
    & > .el-tabs__header {
      margin: 0;
      .el-tabs__item {
        padding: 0 20px;
      }
    }
  }
}
</style>
